<template>
    <common-table :dataSource="dataSource" :columns="columns" @submit="submit">
        <template #bodyCell="{ column, text, open }">
            <template v-if="column.key == 'action'">
                <a-space>
                    <a-space>
                        <a @click="open(true)"> 编辑 </a>
                        <a-divider type="vertical" />
                        <a @click="configure(record)"> 配置 </a>
                        <a-divider type="vertical" />
                        <a-popconfirm v-if="dataSource.length" title="确定要删除该条?"
                        @confirm="onDelete(record.key)"><a style="color: red;">删除</a>
                        </a-popconfirm>
                    </a-space>
                </a-space>
            </template>
            <template v-if="column.key == 'name'">
                <a>{{ text }}</a>
            </template>
        </template>

        <template #editor="{ form }">
            <a-form layout="vertical"> 
              <a-form-item label="系统名称">
                  <a-input v-model:value="form.name" placeholder="请输入系统名称"></a-input>
              </a-form-item>  
              <a-form-item label="版本号">
                  <a-input v-model:value="form.version" placeholder="请输入版本号"></a-input>
              </a-form-item> 
              <a-form-item label="备注">
                  <a-input v-model:value="form.remark" placeholder="请输入备注"></a-input>
              </a-form-item>
            </a-form>
        </template>
		
    </common-table>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { TableColumnType,message  } from "ant-design-vue";
import CommonTable from "../components/common-table.vue";
import { useRouter} from 'vue-router';
import request from "@/api/index";
import { submitApi } from "@/api/form/index";

type ComponentsType = {
    _id?: string;
    name?: string;
    version?: string;
    remark?: string;
};

export default defineComponent({
    components: {
        CommonTable,
    },
    setup() {
        const router = useRouter();
        const dataSource = ref<ComponentsType[]>([]);
        const columns = ref<TableColumnType[]>([
            {
                key: "index",
                width: 68,
                customRender: ({ index }) => index + 1,
            },
            {
                key: "name",
                dataIndex: "name",
                title: "系统名称",
                width: 200,
            },
             {
                key: "version",
                dataIndex: "version",
                title: "版本",
                width: 200,
            },
            {
                key: "remark",
                dataIndex: "remark",
                title: "备注",
                width: 100,
            },
            {
                key: "action",
                title: "操作",
            },
        ]);
        const configure = (record:any)=>{
            router.push({
                path: '/menu',
                query:{
                    rowInfo: JSON.stringify(record)
                }
            })
        }
        const onDelete = (key: string) => {
          dataSource.value = dataSource.value.filter(item => item.key !== key);
        };
        const onLoadData = async () => {
            let res = await request.get("/app/list");
            dataSource.value = res.data;
        };

        onMounted(async () => {
            onLoadData();
        });
        const submit = (form: ComponentsType, close: Function) => {
            submitApi("/app/create_update", form).then((res) => {
                message.success(res.msg);
                close();
                onLoadData();
            });
        };

        return {
            dataSource,
            columns, 
            submit,
            configure
        };
    },
});
</script>
